<template>
  <div>
    <!-- <div class="photo">
      <img src="https://static.maizuo.com/v5/upload/189bcf606b4bf49ad5de201a2ea5024d.jpg?x-oss-process=image/quality,Q_70" alt="">
    </div> -->
    <div class="text" :class="fixed ? 'active' :''">
      <!-- <span class="dress">上海</span> -->
      <span class="dress" @click="cityswitch">{{this.$store.state.city}}<span  class="iconfont icon-xiajiantou"></span></span>

      <span class="span">电影</span>
    </div>
    <comfilmlisttopnav :class="fixed ? 'fixed' : ''"></comfilmlisttopnav>
    <router-view></router-view>
    <!-- <h1>dian</h1> -->
    <!-- <button @click="aaa">请求原来官网数据</button>
      <div v-for="(item,index) in data1" :key="index">
          
           <h1>{{item.name}}</h1>
           <img :src="item.imgUrl" alt="">
      </div> -->




      <!-- <div v-for="(value, key, index) in obj" :key="index">
      <h1>value: {{ value }}</h1>
      <h1>key: {{ key }}</h1>
      <h1>index: {{ index }}</h1>
    </div> -->

    <!-- <div v-for="(item, index) in arr" :key="index">
           <h1>item {{item}}</h1>
           <h1>index {{index}}</h1>
      </div> -->

      <!-- <div v-for="item in items" :key="item.id">
      <div>{{ item.name }}</div>
      <div v-for="dfdf in item.item2" :key="dfdf.id">
        <div>{{ dfdf.text }}</div>
      </div>
    </div> -->

    <!-- <div v-for='tem in items' :key='tem.id'>
      <div>{{tem.name}}</div>
      <div v-for="val in tem.item2" :key="val.text">
        <div>{{val.text}}</div>
      </div>

    </div> -->


  </div>
</template>



<script>
import axios from 'axios'
import comfilmlisttopnav from '@/components/comfilmlisttopnav'
import comloading from '@/components/comloading.vue'
import '@/assets/font_cmcp3orfqv/iconfont.css'

export default {
  //组件名字
  name: "film",
  //接收父组件给的东西 type是接收什么东西  default 默认值
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    color: {
      type: String,
      default: "#000",
    },
  },
  //组件注册
  components: {comfilmlisttopnav,comloading},
  // vue数据集中管理
  data() {
    return {
      value: "1",
      //默认不吸顶
      fixed:false,
      data1: "[]",
      arr:[1,2,3],
      

      obj:{
        x:'a1',
        y:"b1",
      },
      items:[
        {
          id: 1,
          name: "可乐",
          item2: [
            { id: 4, text: "冷冻可乐" },
            { id: 5, text: "香草可乐" },
          ],
        },
        {
          id: 2,
          name: "雪碧",
          item2: [
            { id: 6, text: "冷冻雪碧" },
            { id: 7, text: "青柠雪碧" },
          ],
        },
        {
          id: 3,
          name: "橙子",
          item2: [
            { id: 8, text: "冷冻橙子" },
            { id: 9, text: "新鲜橙子" },
          ],
        },
      ],
    };
  },
  // 方法 函数写这里
    methods:{
      aaa(){
        console.log('进来了film页面的aaa方法里面没了');
        axios.interceptors.request.use(function(config){
          config.headers={
            'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.0.4","e":"1605418550380220569812993"}',
            "X-Host": "mall.cfg.film-float.banner",
          }
          return config
        },function(err){
          if(err){
            console.log('err',err);
          }
        })
        axios.get('https://m.maizuo.com/gateway?cityId=310100&k=2772115').then(data=>{
          console.log(data);
          console.log('11111');
          console.log(data.data);
          this.data1=data.data
        })
      },
      cityswitch(){
        console.log('我进来cityswitch了');
        this.$router.push('/city')
      }
    },
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {
    toUpcase(value) {
      return value ? value.toUpperCase() : "";
    },
  },
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {
    //
  },
  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
  mounted() {
    window.addEventListener("scroll",(e)=>{
      let top=document.documentElement.scrollTop;
      if(top>130 ){
        //吸顶
        this.fixed=true;
        // var show=1;
        // console.log(show);

      }else{
        //还原
        this.fixed=false;
      }
      // if(top<60){
      //   this.fixed=true;
      // }else{
      //   this.fixed=false;
      // }
    })
    true
  },
  //页面销毁之前
  beforeDestroy() {},
  //页面销毁之后
  destroyed() {},
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
  //组件路由守卫enter
  beforeRouteEnter(to, from, next) {
    next((vm) => {});
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  },
  //组件路由守卫update更新
  beforeRouteUpdate(to, from, next) {
    // 同一页面，刷新不同数据时调用，
    next();
  },
  //组件路由守卫离开
  beforeRouteLeave(to, from, next) {
    // 离开当前路由页面时调用
    next();
  },
};
</script>





<style lang="scss" scoped>



  .fixed{
    position: fixed;
    top:50px;
    background: #fff;
    z-index: 333333;
  }



  img{
    width: 100%;
    
  }
  
.text{
  width: 100%;
  height: 50px;
  background-color:#fff;
  position: fixed;
  top: 0;
  opacity:1;
  display: none;
// display: block;
  z-index: 1111111;
  text-align: center;
  line-height: 50px;
  .span{
    color: black;
    font-size: 16px;
    margin-right: 40px;
  }
}
.dress{
  float: left;
 margin-left: 20px;
}
.active{
  display: block;
  border-bottom:1px solid #ededed ;
}

</style> 
 